iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

不只是串串API,新手前端30天系列 第 22

DAY22 - 利用開發者工具列Network import export debug

  • 分享至 

  • xImage
  •  

身為工程師的人,一定無法避免的就是面對BUG!
那有什麼方式debug呢?
如果bug發生在別人的電腦,自己沒辦法還原又可以用什麼方法協助呢。
今天來跟大家分享一個最近常常使用的debug方式,

當bug發生在別人電腦,就算照著對方提供的操作步驟,還是無法還原時,
可以再請對方照著原本會出現bug的方式,提供兩種檔案

  1. .log檔案: 透過console.log印在Console tab裡面的所有資料,就可以得到.log檔案
  2. .har檔案: 透過Network tab裏面,點選export按鈕,就可以下載一個.har檔案

拿到.log檔案當然可以直接透過編輯器看到中間印了哪些log,不過當然前提是你自己在開發的時候有埋log。沒埋的話也是GG XD

拿到.har檔案透過下圖黃色的import按鈕,可以把.har檔案匯入


匯入後,就可以看到所有API呼叫的過程包含打API當時的request和得到的response都可以看到。

照著.har匯入的api呼叫歷程,可以透過中間的request和response看到是不是什麼地方,的request或是response得到有問題。

我自己覺得其實在最開始的時候,會不知道的也是用工具的debug的方法。
雖然現在看起來是一個很基本的小技巧,但當初不知道到發現這個方法覺得非常方便好用,
今天就和大家分享到這裡~~


上一篇
DAY21 - 網頁可以操作電腦裡的檔案?!本地端檔案覆寫 - The File System Access API
下一篇
DAY23 - 我的網站要分析!網站分析工具的選擇和態度(1)
系列文
不只是串串API,新手前端30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言